import React from 'react'
import '../CalculatorCSS.css';
import PropTypes from 'prop-types'

class Calculator extends React.Component{
	constructor(){
		super();
		this.state={inputValue:0,time:0},
		ButtonCreater = ButtonCreater.bind(this),
		CalClick = CalClick.bind(this)

	}
componentWillReceiveProps(newprops){
	this.setState({
		inputValue: newprops.inputValue,
		time:newprops.time
	})
}
	
	render(){


	var show=[];
	var i=0;
	show.push(this.props.history);
	

	// if(this.props.inputValue!==this.state.inputValue){
	// 	i++;
	// 	show[i]=(
			
			
	// 		<div>
	// 		{this.props.history}
	// 		<br/>
	// 		<div>{this.state.inputValue}</div>
		
	// 		</div>
	
			
	// 	)
	// 	console.log(show)
	// }

		return (
			
			
			<div>
			<div className='Cal'>
				<div >

				<input className='ShowNumber'  value={this.state.inputValue}  disabled/>
				</div>
				<div className="CalBotton">
					{ButtonCreater()}
				</div>
			</div>
				<h2 style={{color:'white'}}>计算过程：</h2>
				<textArea className="textArea" disabled>
					{show}
				</textArea>
			
			
			</div>

			)
	}
	
}
	


const Buttons =[
 [1,2,3,'+'],
 [4,5,6,'-'],
 [7,8,9,'/'],
 [0,'.','=','*','C','delete'],
 ];


 function  ButtonCreater () {
	let ButtonGroup=[];
	for(let i=0;i<Buttons.length;i++){
		let ButtonRow = Buttons[i];
		
		for(let j=0;j<ButtonRow.length;j++){
			let SingleButton = ButtonRow[j];
			ButtonGroup.push(
			<button key={i+'-'+j} onClick={(e)=>CalClick(SingleButton)}>{SingleButton}</button>
			)
		}
		
	}
	return ButtonGroup;
}
 function CalClick (content){
	if(content!=='='&&content!=='C'&&content!=='delete'){
		if(this.state.inputValue=='0' ){
		this.setState({inputValue: content},()=>{console.log(this.props.inputValue)});
		}else{
		 this.setState({inputValue: this.state.inputValue+''+content},()=>{console.log(this.props.inputValue)});
		}
	}
	else{
		this.props.ButtonClick(content,this.state.inputValue);
	}
}
Calculator.propTypes ={
	ButtonClick: PropTypes.func.isRequired
}
export default Calculator;